{% extends "base.html" %}
{% load static %}
{% load i18n %}
{% load socialaccount %}

{% block title %}{% trans "Import a Remote Repository" %}{% endblock %}

{% block extra_links %}
  <link rel="stylesheet" type="text/css" href="{% static "projects/css/import.css" %}" />
{% endblock %}

{% block extra_scripts %}
  <script type="text/javascript" src="{% static "vendor/knockout.js" %}"></script>
  <script type="text/javascript" src="{% static "projects/js/import.js" %}"></script>
  <script type="text/javascript">
   var import_views = require('projects/import');
   $(document).ready(function() {
     var instance = {},
         config = {
           {% block project-import-view-extra-config %}{% endblock %}
           'csrf_token': '{{ view_csrf_token }}',
           'urls': {
             'api_sync_remote_repositories': '{% url 'api_sync_remote_repositories' %}',
             'remoteorganization-list': '{% url 'remoteorganization-list' %}',
             'remoterepository-list': '{% url 'remoterepository-list' %}',
             'remoteaccount-list': '{% url 'remoteaccount-list' %}',
             'projects_import': '{% url 'projects_import' %}'
           }
         },
         view = import_views.ProjectImportView.init(
           $('body').get(0),
           instance,
           config
         );
   });
  </script>
{% endblock %}


{% block content %}

  <ul
      class="notifications"
      style="display: none;"
      data-bind="visible: error">
    <li
        class="notification notification-40"
        data-bind="with: error">

      <span data-bind="visible: message">
        {% trans "There was an error with your request:" %}
        <span data-bind="text: message"></span>
      </span>

    </li>
  </ul>

  {% block main_content %}
    <div class="col-major project-import-remote">

      <button
          data-bind="click: sync_projects, visible: !is_syncing()"
          class="remote-sync">
        <span>{% trans "Refresh your accounts" %}</span>
      </button>
      <span
          data-bind="visible: is_syncing"
          class="remote-sync-loader"
          style="display: none;">
        <img src="{% static 'core/img/loader.gif' %}"/>
      </span>

      <h1>{% trans "Import a Repository" %}</h1>

      {% if has_connected_accounts %}
        {% block private-repo-tip %}
          <div class="import-repo">
            <p>
            {% blocktrans trimmed %}
                We're only showing public repositories. For private projects and other features,
                please use <a href="https://readthedocs.com/">Read the Docs for Business</a>.
            {% endblocktrans %}
            </p>
          </div>
        {% endblock %}
      {% endif %}
      <div class="module repository-list">
        <div class="module-wrapper">
          <div class="module-list">
            <div class="module-list-wrapper">

              <ul data-bind="visible: is_ready() && !has_projects()" style="display: none;"
                  class="remote-repos-empty">
                <li class="module-item">
                  {% if has_connected_accounts %}
                    <p>
                      {% blocktrans trimmed with binding='data-bind="click: sync_projects"' %}
                        No remote repositories found,
                        try <a href="#" {{ binding }}>refreshing your accounts</a>.
                      {% endblocktrans %}
                    </p>
                  {% else %}
                    <p>
                      {% blocktrans trimmed %}
                        You don't currently have any connected accounts.
                        Connect your account to be able to easily set up projects.
                      {% endblocktrans %}
                    </p>


                    <div class="project-import-providers">
                      <ul class="socialaccount_providers">
                        {% include "socialaccount/snippets/provider_list.html" with process="connect" next="/dashboard/import/" %}
                      </ul>
                    </div>
                  {% endif %}
                </li>
              </ul>

              <ul data-bind="foreach: projects" class="remote-repos">
                <li
                    class="module-item remote-repo"
                    data-bind="visible: full_name"
                    style="display: none;">

                  <img
                      data-bind="attr: {src: avatar_url}"
                      height="24"
                      class="remote-repo-avatar" />

                  <div class="remote-repo-info">
                    <a
                        data-bind="attr: {href: html_url}, text: full_name"
                        class="remote-repo-name">
                    </a>
                    <span
                        data-bind="visible: !is_locked(), text: clone_url"
                        class="remote-repo-extra remote-repo-extra-url">
                    </span>
                    <span
                        data-bind="visible: is_locked()"
                        class="remote-repo-extra remote-repo-extra-locked">
                      {% trans "This repository requires admin access to import" %}
                    </span>
                  </div>

                  <ul class="module-item-menu remote-repo-menu">
                    <li
                        data-bind="visible: is_locked()"
                        style="display: none;">
                      <span class="remote-repo-locked">
                        <span>{% trans "Locked" %}</span>
                      </span>
                    </li>
                    <li
                        data-bind="visible: match() && !is_locked(), with: match"
                        style="display: none;">
                      <a
                          data-bind="attr: {href: url}"
                          class="remote-repo-view"
                          title="{% trans "This repository has already been imported" %}">
                        <span>{% blocktrans context "verb, action to see in detail" %}View{% endblocktrans %}</span>
                      </a>
                    </li>
                    <li data-bind="visible: !match() && !is_locked()" style="display: none;">
                      <a
                          href="#"
                          data-bind="click: import_repo"
                          class="remote-repo-import">
                        <span>{% trans "Add" %}</span>
                      </a>
                    </li>
                  </ul>

                </li>
              </ul>

            </div>
          </div>
        </div>
      </div>

      <div class="pagination">
        <span data-bind="visible: !page_previous()" class="disabled prev">
          ‹‹ {% trans "previous" %}
        </span>
        <a
            href="#"
            data-bind="visible: page_previous, click: previous_page"
            class="prev">
          ‹‹ {% trans "previous" %}
        </a>

        <span data-bind="visible: !page_next()" class="disabled next">
          {% trans "next" %} ››
        </span>
        <a
            href="#"
            data-bind="visible: page_next, click: next_page"
            class="next">
          {% trans "next" %} ››
        </a>
      </div>

    </div>
  {% endblock main_content %}

  {% block sidebar_content %}
    <div class="col-minor project-import-sidebar">

      {% block manual-import %}
        <div class="import-manual">
          <p>
            {% blocktrans trimmed %}
              You can import your project manually if it isn't listed here or
              connected to one of your accounts.
            {% endblocktrans %}
          </p>

          <form action="{% url "projects_import_manual" %}" method="get" class="import-manual">
            <input type="submit" value="{% trans "Import Manually" %}"/>
          </form>
        </div>
      {% endblock %}

      {% block filter-repositories %}
        <div data-bind="visible: filters().length > 0">
          <h3>{% trans "Filter repositories" %}</h3>

          <ul data-bind="foreach: filters" class="remote-filters">
            <li
                class="remote-filter"
                data-bind="css: {'remote-filter-hidden': filtered()}, click: function () { $root.set_filter_by(filter_id(), filter_type); }">
              <img data-bind="attr: {src: avatar_url}" class="remote-filter-avatar" />
              <span data-bind="text: display_name" class="remote-filter-name"></span>
            </li>
          </ul>
        </div>
      {% endblock %}

    </div>
  {% endblock %}

{% endblock %}
